/**
 * 学习目标：使用动态路由，及参数获取
 *
 */
import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom';
import './index.css';

export default class App extends Component {
  render() {
    return (
      <Router>
        <div>App组件</div>
        <Header></Header>
        <div>
          <NavLink to="/home" activeClassName="my-active">
            跳到Home
          </NavLink>
          <br />
          <a href="#/home">点我调到Home</a>
          <br />
          <NavLink to="/my" activeClassName="my-active" exact>
            跳到我的音乐
          </NavLink>
          <br />
          <NavLink to="/friend" activeClassName="my-active" exact>
            跳到朋友
          </NavLink>
        </div>
        {/* 注意1: 💥只有被<Route component={组件名}> 设置过路径的组件，props上才有history。 */}
        {/* 2. 💥`HashRoute` 与`BrowserRoute` 两种模式下都具有history */}

        <Switch>
          <Route path="/" component={MyMusic} exact />
          {/* 1. 设置动态路由 /pathname/:自定义属性名称 */}
          <Route path="/home/:name" component={Home} />
          <Route path="/my" component={MyMusic} />
          <Route path="/friend" component={Friend} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    );
  }
}

class Header extends React.Component {
  render() {
    console.log(this.props, 'Header的');
    return <div>我是HEader组件，我不需要参与路由</div>;
  }
}

class Home extends React.Component {
  render() {
    console.log(this.props.match, 'Home的props的match属性');
    return (
      <div>
        {/* 2.获取参数： this.props.match.params.自定义属性名 */}
        <h1>我是Home组件- {this.props.match.params.name}</h1>
      </div>
    );
  }
}

class MyMusic extends React.Component {
  render() {
    console.log('props', this.props);
    return (
      <div>
        <h1>我是MyMusic组件</h1>
        <button onClick={() => this.props.history.push('/home')}>点我跳转到Home</button>
        <button onClick={() => this.props.history.go(-1)}>点我通过go方法跳转</button>
      </div>
    );
  }
}

// 在Friend嵌套子路由
class Friend extends React.Component {
  render() {
    return (
      <div>
        <NavLink to="/friend/first">找到第一个朋友</NavLink>
        <NavLink to="/friend/second">找到第二个朋友</NavLink>
        <h1>我是Friend组件</h1>
        {/* 👍 1. 推荐在嵌套路由的时候，扔用Switch包住Route */}
        {/* 3. 子组件中不需要再设置<Router> */}
        <Switch>
          {/* 2. path从第一级路径开始写 */}
          <Route path="/friend/first" component={FirstFriend}></Route>
          <Route path="/friend/second" component={SecondFriend}></Route>
        </Switch>
      </div>
    );
  }
}

class FirstFriend extends React.Component {
  render() {
    return (
      <div>
        <h1>我是第一个朋友</h1>
      </div>
    );
  }
}

class SecondFriend extends React.Component {
  render() {
    return (
      <div>
        <i>第二个朋友</i>
      </div>
    );
  }
}

class NotFound extends React.Component {
  render() {
    return (
      <div>
        <h1>404页面</h1>
      </div>
    );
  }
}
